<template>
  <div class="equipment-maintenance">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <i class="el-icon-setting"></i>
            设备运维管理
          </h2>
          <p class="page-subtitle">管理设备维修记录，跟踪设备维护状态</p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 操作栏 -->
      <div class="action-bar">
        <div class="action-left">
          <el-button type="primary" @click="handleAdd" icon="el-icon-plus" size="medium">
            新增维修记录
          </el-button>
          <el-button type="success" @click="handleBatchExport" icon="el-icon-download" size="medium">
            导出数据
          </el-button>
        </div>
        <div class="action-right">
          <el-input
            v-model="searchKeyword"
            placeholder="请输入设备名称或设备编码"
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
            @clear="handleSearch"
          >
            <template #prefix>
              <i class="el-icon-search"></i>
            </template>
          </el-input>
          <el-button 
            type="default" 
            icon="el-icon-s-operation" 
            @click="showFilterDialog = true"
            class="filter-btn"
            size="medium"
          >
            筛选
          </el-button>
          <el-button 
            type="default" 
            icon="el-icon-refresh" 
            @click="loadData"
            class="refresh-btn"
            size="medium"
          >
            刷新
          </el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <el-table
          :data="tableData"
          v-loading="loading"
          stripe
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
          :row-class-name="getRowClassName"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="equipmentName" label="设备名称" width="120" align="center">
            <template #default="scope">
              <div class="equipment-info">
                <el-tag type="info" size="small">{{ scope.row.equipmentName }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="equipmentCode" label="设备编码" width="120" align="center">
            <template #default="scope">
              <span class="equipment-code">{{ scope.row.equipmentCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceItem" label="维修项目" width="150" align="center">
            <template #default="scope">
              <el-tag type="warning" size="small">{{ scope.row.maintenanceItem }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="maintenancePerson" label="维修人员" width="100" align="center">
            <template #default="scope">
              <div class="person-info">
                <i class="el-icon-user"></i>
                {{ scope.row.maintenancePerson }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceTime" label="维修时间" width="120" align="center">
            <template #default="scope">
              <div class="time-info">
                <i class="el-icon-time"></i>
                {{ formatDate(scope.row.maintenanceTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceHours" label="维修工时" width="100" align="center">
            <template #default="scope">
              <span class="hours-text">{{ scope.row.maintenanceHours }}h</span>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceCost" label="维修费用" width="120" align="center">
            <template #default="scope">
              <span class="cost-text">¥{{ scope.row.maintenanceCost || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="faultDescription" label="故障详情" width="200" align="center" show-overflow-tooltip>
            <template #default="scope">
              <span class="fault-desc">{{ scope.row.faultDescription || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button 
                  type="text" 
                  size="small" 
                  @click="handleDetail(scope.row)"
                  class="action-link detail-link"
                  icon="el-icon-view"
                >
                  详情
                </el-button>
                <el-button 
                  type="text" 
                  size="small" 
                  @click="handleEdit(scope.row)"
                  class="action-link edit-link"
                  icon="el-icon-edit"
                >
                  编辑
                </el-button>
                <el-button 
                  type="text" 
                  size="small" 
                  @click="handleDelete(scope.row)"
                  class="action-link delete-link"
                  icon="el-icon-delete"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </div>

    <!-- 编辑/新增维修记录弹框 -->
    <el-dialog
      :visible.sync="showEditDialog"
      :title="isEdit ? '编辑维修记录' : '新增维修记录'"
      width="700px"
      :before-close="handleEditClose"
      @open="handleEditOpen"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="120px"
        class="maintenance-form"
        size="medium"
      >
        <el-form-item label="选择设备" prop="equipmentId">
          <el-select
            v-model="editForm.equipmentId"
            placeholder="请选择设备（可搜索）"
            filterable
            remote
            :remote-method="searchEquipment"
            :loading="equipmentLoading"
            style="width: 100%"
            @change="handleEquipmentChange"
            clearable
          >
            <el-option
              v-for="item in equipmentOptions"
              :key="item.equipmentId"
              :label="`${item.equipmentName} (${item.equipmentCode})`"
              :value="item.equipmentId"
            >
              <span style="float: left">{{ item.equipmentName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.equipmentCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="维修项目" prop="maintenanceItem">
          <el-input
            v-model="editForm.maintenanceItem"
            placeholder="请输入维修项目"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="维修人员" prop="maintenancePerson">
          <el-input
            v-model="editForm.maintenancePerson"
            placeholder="请输入维修人员姓名"
            maxlength="50"
          />
        </el-form-item>

        <el-form-item label="维修时间" prop="maintenanceTime">
          <el-date-picker
            v-model="editForm.maintenanceTime"
            type="date"
            placeholder="请选择维修时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维修工时" prop="maintenanceHours">
              <el-input-number
                v-model="editForm.maintenanceHours"
                :min="0"
                :precision="1"
                placeholder="请输入维修工时"
                style="width: 100%"
                controls-position="right"
              />
              <div class="form-tip">单位：小时</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修费用" prop="maintenanceCost">
              <el-input-number
                v-model="editForm.maintenanceCost"
                :min="0"
                :precision="2"
                placeholder="请输入维修费用"
                style="width: 100%"
                controls-position="right"
              />
              <div class="form-tip">单位：元</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="故障详情">
          <el-input
            v-model="editForm.faultDescription"
            type="textarea"
            :rows="4"
            placeholder="请详细描述设备故障情况，包括故障现象、发生时间、影响范围等"
            maxlength="500"
            show-word-limit
            resize="vertical"
          />
        </el-form-item>

        <el-form-item label="处理情况">
          <el-input
            v-model="editForm.handlingSituation"
            type="textarea"
            :rows="4"
            placeholder="请描述维修处理情况，包括维修方法、使用的工具材料、处理结果等"
            maxlength="500"
            show-word-limit
            resize="vertical"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditClose" size="medium">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit" :loading="editSubmitLoading" size="medium">
            <i class="el-icon-check" v-if="!editSubmitLoading"></i>
            {{ isEdit ? '更新记录' : '保存记录' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog
      :visible.sync="showDetailDialog"
      title="维修记录详情"
      width="700px"
      :before-close="handleDetailClose"
    >
      <div class="detail-content" v-if="currentMaintenance">
        <el-descriptions :column="2" border size="medium">
          <el-descriptions-item label="设备名称" label-class-name="detail-label">
            <el-tag type="info" size="small">{{ currentMaintenance.equipmentName || '未知' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="设备编码" label-class-name="detail-label">
            <span class="detail-value">{{ currentMaintenance.equipmentCode || '未知' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="维修项目" label-class-name="detail-label">
            <el-tag type="warning" size="small">{{ currentMaintenance.maintenanceItem || '未知' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="维修人员" label-class-name="detail-label">
            <span class="detail-value">{{ currentMaintenance.maintenancePerson || '未知' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="维修时间" label-class-name="detail-label">
            <el-tag type="success" size="small">{{ currentMaintenance.maintenanceTime || '未知' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="维修工时" label-class-name="detail-label">
            <span class="detail-value">{{ currentMaintenance.maintenanceHours || 0 }} 小时</span>
          </el-descriptions-item>
          <el-descriptions-item label="维修费用" label-class-name="detail-label">
            <span class="cost-value">¥{{ currentMaintenance.maintenanceCost || 0 }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="记录ID" label-class-name="detail-label">
            <span class="detail-value small-text">{{ currentMaintenance.equipmentMaintenanceId || '未知' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="故障详情" :span="2" label-class-name="detail-label">
            <div class="text-content">
              {{ currentMaintenance.faultDescription || '暂无故障详情描述' }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="处理情况" :span="2" label-class-name="detail-label">
            <div class="text-content">
              {{ currentMaintenance.handlingSituation || '暂无处理情况描述' }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDetailClose">关闭</el-button>
          <el-button type="primary" @click="handleEditFromDetail">编辑</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 筛选弹框 -->
    <el-dialog
      :visible.sync="showFilterDialog"
      title="筛选条件"
      width="500px"
      :before-close="() => showFilterDialog = false"
    >
      <el-form :model="filterForm" label-width="120px" size="medium">
        <el-form-item label="维修状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable style="width: 100%">
            <el-option label="待处理" :value="0" />
            <el-option label="已完成" :value="1" />
            <el-option label="进行中" :value="2" />
            <el-option label="已取消" :value="3" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="维修人员">
          <el-input v-model="filterForm.maintenancePerson" placeholder="请输入维修人员姓名" clearable />
        </el-form-item>
        
        <el-form-item label="维修时间">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="费用范围">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input-number
                v-model="filterForm.minCost"
                :min="0"
                :precision="2"
                placeholder="最小费用"
                style="width: 100%"
                controls-position="right"
              />
            </el-col>
            <el-col :span="12">
              <el-input-number
                v-model="filterForm.maxCost"
                :min="0"
                :precision="2"
                placeholder="最大费用"
                style="width: 100%"
                controls-position="right"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetFilter" size="medium">重置</el-button>
          <el-button @click="showFilterDialog = false" size="medium">取消</el-button>
          <el-button type="primary" @click="applyFilter" size="medium">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { equipmentMaintenanceApi, equipmentApi } from '@/api/equipment'

export default {
  name: 'EquipmentMaintenance',
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: false,
      
      // 分页参数
      currentPage: 1,
      pageSize: 10,
      total: 0,
      
      // 搜索参数
      searchKeyword: '',
      
      // 编辑弹框参数
      showEditDialog: false,
      currentMaintenance: {},
      
      // 详情弹框参数
      showDetailDialog: false,
      
      // 筛选弹框参数
      showFilterDialog: false,
      filterForm: {
        status: '',
        dateRange: [],
        maintenancePerson: '',
        minCost: null,
        maxCost: null
      },
      
      // 编辑表单数据
      editForm: {
        equipmentMaintenanceId: '',
        equipmentId: '',
        equipmentName: '',
        equipmentCode: '',
        maintenanceItem: '',
        maintenancePerson: '',
        maintenanceTime: '',
        maintenanceHours: null,
        maintenanceCost: null,
        faultDescription: '',
        handlingSituation: ''
      },
      
      // 表单验证规则
      editRules: {
        equipmentId: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        maintenanceItem: [
          { required: true, message: '请输入维修项目', trigger: 'blur' }
        ],
        maintenancePerson: [
          { required: true, message: '请输入维修人员', trigger: 'blur' }
        ],
        maintenanceTime: [
          { required: true, message: '请选择维修时间', trigger: 'change' }
        ],
        maintenanceHours: [
          { required: true, message: '请输入维修工时', trigger: 'blur' }
        ],
        maintenanceCost: [
          { required: true, message: '请输入维修费用', trigger: 'blur' }
        ]
      },
      
      // 设备选项
      equipmentOptions: [],
      equipmentLoading: false,
      editSubmitLoading: false
    }
  },
  
  computed: {
    isEdit() {
      return !!this.editForm.equipmentMaintenanceId
    }
  },
  
  mounted() {
    this.loadData()
  },
  
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          keyword: this.searchKeyword || null,
          ...this.getFilterParams()
        }
        
        const response = await equipmentMaintenanceApi.getMaintenancePage(params)
        if (response.code === 200) {
          this.tableData = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.$message.error(response.message || '加载数据失败')
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    
    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.loadData()
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.loadData()
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    },
    
    // 新增维修记录
    handleAdd() {
      console.log("新增按钮被点击，准备打开弹框"); // 新增日志
  this.resetEditForm();
  this.showEditDialog = true;
  console.log("showEditDialog当前值：", this.showEditDialog); // 确认变量是否被设为true
    },
    
    // 查看详情
    async handleDetail(row) {
      // 使用弹框方式显示详情
      try {
    const response = await equipmentMaintenanceApi.getMaintenanceDetail(row.equipmentMaintenanceId)
    if (response.code === 200) {
      this.currentMaintenance = response.data || {}
      this.showDetailDialog = true
    } else {
      this.$message.error(response.message || '获取详情失败')
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    this.$message.error('获取详情失败')
      }
    },
    
    // 详情关闭
    // handleDetailClose() {
    //   this.showDetailDialog = false
    //   this.currentMaintenance = {}
    // },

    // 从详情弹框跳转到编辑
    // handleEditFromDetail(maintenanceData) {
    //   this.currentMaintenance = { ...maintenanceData }
    //   this.showEditDialog = true
    // },
    
    // 编辑维修记录
    handleEdit(row) {
      this.editForm = { ...row }
      this.showEditDialog = true
    },
    
    // 编辑成功回调
    handleEditSuccess() {
      this.loadData() // 重新加载数据
    },
    
    // 重置编辑表单
    resetEditForm() {
      this.editForm = {
        equipmentMaintenanceId: '',
        equipmentId: '',
        equipmentName: '',
        equipmentCode: '',
        maintenanceItem: '',
        maintenancePerson: '',
        maintenanceTime: '',
        maintenanceHours: null,
        maintenanceCost: null,
        faultDescription: '',
        handlingSituation: ''
      }
      // 清除验证
      this.$nextTick(() => {
        if (this.$refs.editFormRef) {
          this.$refs.editFormRef.clearValidate()
        }
      })
    },
    
    // 编辑弹框打开
    handleEditOpen() {
      this.loadEquipmentOptions()
    },
    
    // 编辑弹框关闭
    handleEditClose() {
      this.showEditDialog = false
      this.resetEditForm()
    },
    
    // 编辑表单提交
    async handleEditSubmit() {
      try {
        const valid = await this.$refs.editFormRef.validate()
        if (!valid) return

        this.editSubmitLoading = true
        
        let response
        if (this.isEdit) {
          // 编辑
          response = await equipmentMaintenanceApi.updateMaintenance(this.editForm)
        } else {
          // 新增
          response = await equipmentMaintenanceApi.addMaintenance(this.editForm)
        }

        if (response.code === 200) {
          this.$message.success(this.isEdit ? '更新成功' : '添加成功')
          this.loadData()
          this.handleEditClose()
        } else {
          this.$message.error(response.message || (this.isEdit ? '更新失败' : '添加失败'))
        }
      } catch (error) {
        console.error('提交失败:', error)
        this.$message.error(this.isEdit ? '更新失败' : '添加失败')
      } finally {
        this.editSubmitLoading = false
      }
    },
    
    // 详情弹框关闭
    handleDetailClose() {
      this.showDetailDialog = false
      this.currentMaintenance = {}
    },
    
    // 从详情弹框跳转到编辑
    handleEditFromDetail() {
      this.editForm = { ...this.currentMaintenance }
      this.showDetailDialog = false
      this.showEditDialog = true
    },
    
    // 加载设备选项
    async loadEquipmentOptions() {
      this.equipmentLoading = true
      try {
        const response = await equipmentApi.getAllEquipmentNames()
        if (response.code === 200) {
          this.equipmentOptions = response.data || []
        }
      } catch (error) {
        console.error('加载设备列表失败:', error)
        this.$message.error('加载设备列表失败')
      } finally {
        this.equipmentLoading = false
      }
    },
    
    // 搜索设备
    async searchEquipment(query) {
      if (!query) {
        this.loadEquipmentOptions()
        return
      }
      
      this.equipmentLoading = true
      try {
        const response = await equipmentApi.getEquipmentPage({
          pageNum: 1,
          pageSize: 50,
          title: query
        })
        if (response.code === 200) {
          this.equipmentOptions = response.data.records || []
        }
      } catch (error) {
        console.error('搜索设备失败:', error)
      } finally {
        this.equipmentLoading = false
      }
    },
    
    // 设备选择改变
    handleEquipmentChange(equipmentId) {
      const selectedEquipment = this.equipmentOptions.find(item => item.equipmentId === equipmentId)
      if (selectedEquipment) {
        this.editForm.equipmentName = selectedEquipment.equipmentName
        this.editForm.equipmentCode = selectedEquipment.equipmentCode
      }
    },
    
    // 删除维修记录
    handleDelete(row) {
      this.$confirm(`确定要删除设备 "${row.equipmentName}" 的维修记录吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await equipmentMaintenanceApi.deleteMaintenance(row.equipmentMaintenanceId)
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.error(response.message || '删除失败')
          }
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        0: 'info',      // 待处理
        1: 'success',   // 已完成
        2: 'warning',   // 进行中
        3: 'danger'     // 已取消
      }
      return statusMap[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '已完成',
        2: '进行中',
        3: '已取消'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取行样式类名
    getRowClassName({ row, rowIndex }) {
      if (row.status === 1) {
        return 'success-row'
      } else if (row.status === 2) {
        return 'warning-row'
      } else if (row.status === 3) {
        return 'danger-row'
      }
      return ''
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return '--'
      return new Date(date).toLocaleDateString('zh-CN')
    },
    
    // 批量导出
    handleBatchExport() {
      this.$message.info('导出功能开发中...')
    },
    
    // 应用筛选
    applyFilter() {
      this.currentPage = 1
      this.loadData()
      this.showFilterDialog = false
    },
    
    // 重置筛选
    resetFilter() {
      this.filterForm = {
        status: '',
        dateRange: [],
        maintenancePerson: '',
        minCost: null,
        maxCost: null
      }
      this.applyFilter()
    },
    
    // 获取筛选参数
    getFilterParams() {
      const params = {}
      if (this.filterForm.status !== '') {
        params.status = this.filterForm.status
      }
      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
        params.startDate = this.filterForm.dateRange[0]
        params.endDate = this.filterForm.dateRange[1]
      }
      if (this.filterForm.maintenancePerson) {
        params.maintenancePerson = this.filterForm.maintenancePerson
      }
      if (this.filterForm.minCost !== null) {
        params.minCost = this.filterForm.minCost
      }
      if (this.filterForm.maxCost !== null) {
        params.maxCost = this.filterForm.maxCost
      }
      return params
    }
  }
}
</script>

<style scoped>
.equipment-maintenance {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  color: white;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-section {
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.page-title i {
  font-size: 32px;
  color: #ffd700;
}

.page-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.main-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid #ebeef5;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
}

.action-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.action-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-input {
  width: 320px;
}

.search-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.filter-btn, .refresh-btn {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.filter-btn:hover, .refresh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.table-container {
  padding: 0 30px;
}

/* 表格行样式 */
:deep(.el-table .success-row) {
  background-color: #f0f9ff;
}

:deep(.el-table .warning-row) {
  background-color: #fefce8;
}

:deep(.el-table .danger-row) {
  background-color: #fef2f2;
}

/* 表格单元格样式 */
.equipment-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipment-code {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #606266;
  background: #f5f7fa;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.person-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
}

.person-info i {
  color: #409EFF;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606266;
}

.time-info i {
  color: #67C23A;
}

.hours-text {
  color: #E6A23C;
  font-weight: 600;
  background: #fdf6ec;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.cost-text {
  color: #E6A23C;
  font-weight: 700;
  font-size: 14px;
}

.fault-desc {
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-link {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 12px;
  font-weight: 500;
}

.detail-link {
  color: #409EFF;
}

.detail-link:hover {
  color: #66b1ff;
  background-color: #ecf5ff;
}

.edit-link {
  color: #67C23A;
}

.edit-link:hover {
  color: #85ce61;
  background-color: #f0f9ff;
}

.delete-link {
  color: #F56C6C;
}

.delete-link:hover {
  color: #f78989;
  background-color: #fef0f0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 25px 30px;
  border-top: 1px solid #ebeef5;
  background: #fafbfc;
}

/* 确保按钮可点击 */
.action-link {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.action-link:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 弹框样式 */
.maintenance-form {
  padding: 20px 0;
  max-height: 60vh;
  overflow-y: auto;
}

.form-tip {
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

.detail-content {
  padding: 10px 0;
}

.detail-label {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

.detail-value {
  color: #303133;
  font-weight: 500;
}

.cost-value {
  color: #E6A23C;
  font-weight: 600;
  font-size: 16px;
}

.small-text {
  font-size: 12px;
  color: #909399;
}

.text-content {
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 20px;
}

/* 表单项间距调整 */
:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
  font-size: 14px;
}

:deep(.el-form-item__content) {
  line-height: 1.4;
}

:deep(.el-input__count) {
  color: #909399;
  font-size: 12px;
}

:deep(.el-textarea__inner) {
  resize: vertical;
  line-height: 1.5;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

:deep(.el-select .el-input__inner) {
  cursor: pointer;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

/* 弹框标题样式 */
:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 30px;
  border-radius: 8px 8px 0 0;
}

:deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 20px;
}

:deep(.el-dialog__headerbtn .el-dialog__close:hover) {
  color: #f0f0f0;
}

/* 弹框内容区域 */
:deep(.el-dialog__body) {
  padding: 30px;
}

/* 描述列表样式优化 */
:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions__table) {
  border-collapse: collapse;
}

:deep(.el-descriptions__table .el-descriptions__cell) {
  border: 1px solid #ebeef5;
  padding: 12px 15px;
}

/* 滚动条样式 */
.maintenance-form::-webkit-scrollbar {
  width: 6px;
}

.maintenance-form::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.maintenance-form::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.maintenance-form::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-maintenance {
    padding: 10px;
  }
  
  .page-header {
    padding: 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    padding: 20px;
  }
  
  .action-left, .action-right {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .search-input {
    width: 100%;
    max-width: 300px;
  }
  
  .table-container {
    padding: 0 15px;
    overflow-x: auto;
  }
  
  .pagination-container {
    padding: 15px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-link {
    font-size: 11px;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 20px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .action-left, .action-right {
    gap: 8px;
  }
}
</style>
